import { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import Icon from '@/components/icon/index'

interface Props {
  src: string
  className?: string
  alt?: string
}

function Image({ src, className, alt }: Props) {
  // 记录图片是否出错
  const [isError, setIsError] = useState(false)
  // 记录图片是否在加载状态
  const [isLoading, setIsLoading] = useState(true)
  // 对图片元素的引用
  const imgRef = useRef(null)
  // 在组件创建时
  useEffect(() => {
    // 新建一个浏览器 IntersectionObserver 对象
    // 用来监听 img 图片元素是否和视口交叉（即出现在可视区域）
    const observer = new IntersectionObserver((entries, imgObserver) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 如果出现在可视区域，则将存放在 img 标签 data-src 属性中的图片地址，
          const img = entry.target as HTMLImageElement
          // 设置到 src 属性上，即开始真正加载图片
          img.src = img.dataset.realsrc!
          imgObserver.unobserve(entry.target)
        }
      })
    })
    // 开始监听
    observer.observe(imgRef.current!)
    return () => {
      // 停止IntersectionObserver对象的监听
      observer.disconnect()
    }
  }, [])
  return (
    <>
      <div className={classnames(styles.root, className)}>
        {/* 正在加载时显示的内容 */}
        {isLoading && (
          <div className="image-icon">
            <Icon type="iconphoto" />
          </div>
        )}

        {/* 加载出错时显示的内容 */}
        {isError && (
          <div className="image-icon">
            <Icon type="iconphoto-fail" />
          </div>
        )}

        {/* 加载成功时显示的内容 */}
        {!isError && (
          <img
            alt={alt}
            data-realsrc={src}
            ref={imgRef}
            onLoad={() => setIsLoading(false)}
            onError={() => setIsError(true)}
          />
        )}
      </div>
    </>
  )
}
export default Image
